.button {
  --buttonSize: calc((56 / 16) * 1rem);
  --buttonFontSize: calc((18 / 16) * 1rem);
  --buttonFocusWidth: 4px;
  --buttonPadding: 0 var(--spaceL);
  --buttonTextColor: rgb(var(--rgbBackground));
  --buttonTextOpacity: 1;
  --buttonLoaderDelay: 0s;

  height: var(--buttonSize);
  padding: var(--buttonPadding);
  cursor: pointer;
  transition-property: opacity, color, background;
  transition-duration: var(--durationS);
  transition-timing-function: var(--bezierFastoutSlowin);
  display: inline-flex;
  align-items: center;
  color: var(--buttonTextColor);
  position: relative;
  isolation: isolate;

  &:active {
    transition-duration: calc(var(--durationXS) / 2);
  }

  &::after {
    content: '';
    transition-property: opacity, color, background;
    transition-duration: var(--durationM);
    transition-timing-function: var(--bezierFastoutSlowin);
    background: rgb(var(--rgbPrimary));
    position: absolute;
    inset: 0;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  }

  @media (--mediaUseMotion) {
    transition-property: transform, opacity, color, background;

    &:hover {
      transform: scale(1.05);
    }

    &:active {
      transform: scale(1);
    }
  }

  &[data-secondary='true'] {
    --buttonSpace: 10px;
    --buttonTextColor: rgb(var(--rgbPrimary));

    background: none;
    padding-left: var(--buttonSpace);
    padding-right: var(--buttonSpace);
    position: relative;
    left: calc(var(--buttonSpace) * -1);
    height: calc((32 / 16) * 1rem);

    &::after {
      content: '';
      height: calc((32 / 16) * 1rem);
      position: absolute;
      inset: 0;
      background-color: rgb(var(--rgbPrimary) / 0.2);
      transform: scale3d(0, 1, 1);
      transform-origin: right;
      clip-path: none;
    }

    &:hover {
      transform: none;
      background: transparent;
    }

    &:hover::after {
      transform: scale3d(1, 1, 1);
      transform-origin: left;
    }

    &[data-icon='chevronRight'] {
      padding-left: calc(var(--buttonSpace) / 2);
    }

    @media (--mediaUseMotion) {
      &::after {
        transition: transform var(--durationM) var(--bezierFastoutSlowin);
      }
    }
  }

  &[data-loading='true'] {
    --buttonTextOpacity: 0;
  }

  &[data-icon-only='true'] {
    --buttonPadding: 0;
    --buttonTextColor: var(--colorTextBody);

    width: var(--buttonSize);
    align-items: center;
    justify-content: center;
    padding: 0;

    &:hover {
      transform: none;
    }

    &::after {
      background: rgb(var(--rgbText) / 0);
    }

    &:hover::after {
      background: rgb(var(--rgbText) / 0.1);
    }
  }

  &[disabled] {
    pointer-events: none;
    opacity: 0.4;
  }
}

.text {
  font-size: var(--buttonFontSize);
  font-weight: var(--fontWeightMedium);
  opacity: var(--buttonTextOpacity);
  position: relative;
  line-height: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--durationM) var(--bezierFastoutSlowin);
}

.loader {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(var(--rgbBackground));
  opacity: 0;
  transition: opacity var(--durationM) ease var(--buttonLoaderDelay);

  &[data-visible='true'] {
    opacity: 1;
  }
}

.icon {
  transition-property: opacity, fill;
  transition-duration: var(--durationS);
  transition-timing-function: var(--bezierFastoutSlowin);

  @media (--mediaUseMotion) {
    transition-property: transform, opacity, fill;
  }

  &[data-start='true'] {
    margin-right: var(--spaceS);
  }

  &[data-end='true'] {
    margin-left: var(--spaceS);
  }

  @media (--mediaUseMotion) {
    @nest .button:hover &[data-shift='true'] {
      transform: translate3d(var(--spaceXS), 0, 0);
    }
  }

  @nest .button[data-loading='true'] & {
    opacity: 0;
  }
}
